<template>
    <div style="line-height:0;text-align:left">
        <div>
            <el-input placeholder="角色名称" v-model="rolevalue"></el-input>
            <el-button @click="search(rolevalue)" style="margin-left: 10px" type="primary"
                ><i class="el-icon-search">查询</i></el-button
            >
            <el-button @click="clear">清空</el-button>
        </div>
        <div style="margin-top: 20px">
            <router-link to="/Home/RoleAdd"
                ><el-button id="add" type="danger">添加</el-button></router-link
            >
            <el-button
                id="deletesome"
                style="width: 80px; height: 28px"
                type="danger"
                >批量删除</el-button
            >
        </div>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%; margin-top: 20px"
        >
            <el-table-column type="selection" width="180"> </el-table-column>
            <el-table-column type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称">
            </el-table-column>
                <el-table-column label="操作">
                   <template slot-scope="scope">
                        <router-link to="/Home/SetRole"
                        ><el-button style="margin-right: 10px" type="info"
                            ><i class="el-icon-info"></i></el-button
                    ></router-link>
                    <router-link :to="'/Home/RoleUpdate/'+ scope.row.id ">
                        <el-button style="margin-right: 10px" type="primary"
                            ><i class="el-icon-edit"></i></el-button
                    ></router-link>
                    <el-button type="danger"
                        ><i class="el-icon-delete"></i
                    ></el-button>
                   </template>
                </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            limit: 20,
            currentPage: 1,
            rolevalue:''
        };
    },
    methods: {
        //搜索
        search(val){
            console.log(val)
            this.getAllRoles({roleName:val},this.limit,this.currentPage);
        },
        //清空
        clear(){
            this.rolevalue = '';
            this.getAllRoles();
        },
        //获取分页角色列表
        async getAllRoles() {
            const res = await this.api.role.getAllRoles(
                {roleName:this.rolevalue},
                this.limit,
                this.currentPage
            );
            console.log(res);
            if (res.code) {
                this.tableData = res.data.items;
            }
        },
    },
    created() {
        this.getAllRoles();
    },
};
</script>

<style lang="scss" scoped>
.el-input {
    width: 185px;
}
#add {
    width: 60px;
    height: 28px;
    line-height: 5px;
    margin: 0;
    padding: 0;
    margin-right: 20px;
}
#deletesome {
    height: 28px;
    line-height: 5px;
    margin: 0;
    padding: 0;
    text-align: center;
}
</style>